<template>
    <Wrapper tab="/setting/user">
        <div class="user">
            <div class="card">
                <Grouping class="grouping" :data="arr" :width="300" :config="config">
                    <template #search>
                        <div class="search">
                            <Search :style="{width: '100%'}" placeholder="搜分组" />
                        </div>
                    </template>
                </Grouping>
                <div class="card-table">
                    <div class="card-header flex">
                        <div class="title">全部（12）</div>
                        <div class="ml12">可用席位: <span class="color">不限</span></div>
                        <div class="ml12">
                            当前在线：453
                            <a-tooltip
                                placement="top"
                                title="统计分组下所有企微号（含分组下其他子账号登录的企微号）的登录数据"
                            >
                                <QuestionCircleOutlined />
                            </a-tooltip>
                        </div>
                    </div>
                    <div class="card-btn flex-jsb mt16">
                        <div class="flex">
                            <a-button :icon="h(PlusOutlined)" type="primary">员工账号</a-button>
                            <Search class="ml12" placeholder="搜索部门员工" />
                        </div>
                        <div class="flex right">
                            <div>
                                共<span>&nbsp;&nbsp;12&nbsp;&nbsp;</span>个员工，已选择<span
                                    >&nbsp;&nbsp;12&nbsp;&nbsp;</span
                                >
                                个
                            </div>
                            <a-button type="primary" class="ml12">换分组</a-button>
                            <a-button type="primary" class="ml12">删除</a-button>
                        </div>
                    </div>
                    <a-table
                        class="mt16"
                        :columns="columns"
                        :data-source="list"
                        :row-selection="{selectedRowKeys: state.selectedRowKeys, onChange: handleSelectChange}"
                        :rowKey="record => JSON.stringify(record)"
                        :pagination="{
                            showQuickJumper: true,
                            showSizeChanger: false,
                        }"
                    >
                        <template #bodyCell="{column, text}">
                            <template v-if="column.dataIndex === 'name'">
                                <a>{{ text }}</a>
                            </template>

                            <template v-if="['status', 'port', 'manager'].includes(column.dataIndex)">
                                <a-tag>{{ text }}</a-tag>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
    </Wrapper>
</template>

<script setup>
import {h, reactive} from "vue";
import {QuestionCircleOutlined, PlusOutlined} from "@ant-design/icons-vue";
import {Grouping, Search} from "@/components";
import Wrapper from "./components/Wrapper.vue";

const state = reactive({
    selectedRowKeys: [],
});

const handleSelectChange = chooseRow => {
    console.log("selectedRowKeys", chooseRow);
    state.selectedRowKeys = chooseRow;
};

const config = {
    title: "title",
    key: "key",
    num: "num",
};

const columns = [
    {
        title: "企微号",
        dataIndex: "weChat",
    },
    {
        title: "员工编号",
        dataIndex: "number",
    },
    {
        title: "分组",
        dataIndex: "name",
    },
    {
        title: "状态",
        dataIndex: "status",
    },
    {
        title: "客户数/群数",
        dataIndex: "count",
    },
    {
        title: "端口",
        dataIndex: "port",
    },
    {
        title: "管理员工",
        dataIndex: "manager",
    },
    {
        title: "操作",
        dataIndex: "action",
    },
];

const arr = new Array(1).fill(1).map((item, index) => ({title: `分组${index + 1}`, num: 123, key: index}));

const list = new Array(4).fill(0).map((item, index) => ({
    name: "测试",
    weChat: "测试" + index,
    number: "1234567890" + index,
    status: 1,
    count: "123/456",
    port: 1,
    manager: "测试" + index,
}));
</script>
<style scoped lang="less">
.user {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .card {
        height: 100%;
        margin-top: 0;
        overflow: hidden;
        padding: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        background-color: #fff;
        > div {
            height: 100%;
            overflow: hidden;
        }

        .grouping {
            width: 300px;
            border-right: 1px solid #ccc;
            .search {
                width: 100%;
                margin-bottom: 6px;
            }
        }
        .card-table {
            overflow: hidden;
            flex: 1 1;
            background: #fff;
            min-height: 100%;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 4px 4px 0;
            padding: 16px;
            line-height: 24px;

            .card-header {
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                }
                div {
                    color: rgba(0, 0, 0, 0.45);
                    font-weight: normal;
                    font-size: 14px;
                    .color {
                        color: rgb(48, 112, 255);
                    }
                }
            }
            .card-btn {
                .right {
                    font-size: 12px;
                    color: #888999;
                    line-height: 22px;
                    span {
                        color: #f02020;
                    }
                }
            }
        }
    }
}
</style>
